<template>
  <div ref="target">
    <div class="flex">
      <img v-for="action in actionList" :key="action.type" @click="clickAction(action)"
        class="ml-3 h-[24px] min-w-[24px] cursor-pointer" :src="action.icon" alt="" />
    </div>
    <van-uploader v-show="false" ref="uploaderRef" :accept="uploadChooseOptions.accept"
      :capture="uploadChooseOptions.capture" :preview-image="false" multiple max-count="9"
      :after-read="afterReadFile" />
    <div class="dac"></div>
  </div>
</template>

<script setup lang="ts">
import image from '@/assets/images/chatFooter/image.png'
import video from '@/assets/images/chatFooter/video.png'
import file from '@/assets/images/chatFooter/file.png'

import { onClickOutside } from '@vueuse/core'
import { UploaderFileListItem, UploaderInstance } from 'vant'
import { ChatFooterActionType } from '@/constants/action'

const { t, locale } = useI18n()

type ChatFooterActionEmits = {
  (event: 'closeActionBar'): void
  (event: 'getFile', uploadData: UploaderFileListItem): void
}

type ChatFooterActionItem = {
  text: string
  icon: string
  type: ChatFooterActionType
}

const actionList: ChatFooterActionItem[] = [
  {
    text: t('footerAction.album'),
    icon: image,
    type: ChatFooterActionType.Album,
  },
  {
    text: t('footerAction.shoot'),
    icon: video,
    type: ChatFooterActionType.Shoot,
  },
  // {
  //   text: t('footerAction.file'),
  //   icon: file,
  //   type: ChatFooterActionType.File,
  // },
]

watch(locale, () => {
  actionList[0].text = t('footerAction.album')
  actionList[1].text = t('footerAction.shoot')
  actionList[2].text = t('footerAction.file')
})

const emit = defineEmits<ChatFooterActionEmits>()

const uploadChooseOptions = reactive({
  accept: '*',
  capture: undefined as any,
})
const target = ref(null)
const uploaderRef = ref<UploaderInstance>()

onClickOutside(target, () => emit('closeActionBar'), {
  ignore: ['.van-overlay', '.van-action-sheet__content'],
})

const clickAction = ({ type }: ChatFooterActionItem) => {
  console.log(type)
  switch (type) {
    case ChatFooterActionType.Album:
      uploadChooseOptions.accept = 'image/*'
      uploadChooseOptions.capture = undefined
      nextTick(() => uploaderRef.value?.chooseFile())
      break
    case ChatFooterActionType.Shoot:
      uploadChooseOptions.accept = 'video/*'
      uploadChooseOptions.capture = 'camcorder'
      nextTick(() => uploaderRef.value?.chooseFile())
      break
    case ChatFooterActionType.File:
      uploadChooseOptions.accept = '*'
      uploadChooseOptions.capture = undefined
      nextTick(() => uploaderRef.value?.chooseFile())
      break
    default:
      break
  }
}

const afterReadFile = (data: UploaderFileListItem | UploaderFileListItem[]) => {
  if (!Array.isArray(data)) {
    data = [data]
  }
  data.map((item) => {
    emit('getFile', item)
  })
}
</script>

<style lang="scss" scoped>
:deep(.van-icon__image) {
  width: 48px;
  height: 48px;
}

:deep(.van-grid-item__content) {
  background: none;
  padding: 6px 8px;
}
</style>
